<template>
  <div class="tab-header">
    <span class="tab-item" v-for="(item, index) in tabList" :key="index"
      :class="{ 'isActivate': index == activeIndex }" @click="handleActive(index)">{{ item }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const activeIndex = ref(0)
defineProps({
  tabList: {
    type: Array<String>,
  }
})

const emits = defineEmits<{
  (e: 'change', index: number): void
}>()

const handleActive = (index: number) => {
  activeIndex.value = index
  emits('change', index)
}
</script>

<style scoped lang='scss'>
.tab-header {
  text-align: center;
  margin-bottom: 10px;

  .tab-item {
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    border-bottom: 2px solid #409EFF;
  }

  .isActivate {
    border: 2px solid #409EFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    background-color: #409EFF;
  }

}
</style>